<template>
    <div class="wrapper">
        <t-card>
            <t-row class="table-header">
                <t-space>
                    <t-space align="center">
                        <span>开始日期</span>
                        <t-date-picker v-model="selectedStartDate" mode="date" placeholder="请选择开始日期" format="YYYY-MM-DD"
                            @change="handleDateChange" />
                        <span>结束日期</span>
                        <t-date-picker v-model="selectedEndDate" mode="date" placeholder="请选择结束日期" format="YYYY-MM-DD"
                            @change="handleDateChange" />
                    </t-space>
                    <t-input v-model="searchKey" placeholder="请输入搜索的邮箱" size="medium"></t-input>
                    <t-button theme="primary" size="medium" @click="handleSearch">搜索</t-button>
                </t-space>

            </t-row>
            <t-table :row-key="rowKey" :data="operationLogListDataData" :columns="columns" :size="size"
                :bordered="bordered" :stripe="stripe" :resizable="resizable" :loading="loading" :pagination="pagination"
                @page-change="rehandlePageChange" class="table-content">
                <template #status="{ row }">
                    <t-tag :theme="row.status == '成功' ? 'success' : 'danger'" :content="row.status" />
                </template>
            </t-table>

        </t-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { operationLogList } from '@/api/log';
import { useUserStore } from '@/store';
// id
const userStore = useUserStore();
const uid = userStore.id;

// 搜索框
const searchKey = ref('');
const selectedStartDate = ref('');
const selectedEndDate = ref('');


// 表格属性
const rowKey = ref('id');
const operationLogListDataData = ref<any>([]);
const size = ref('medium');
const bordered = ref(true);
const stripe = ref(true);
const resizable = ref(true);
const loading = ref(false);
const pagination = ref({
    defaultCurrent: 1,
    defaultPageSize: 10,
    total: 0,
    current: 1,
    pageSize: 10,
    pageSizeOptions: [2, 5, 10],
});

// 处理分页变化
const rehandlePageChange = async (curr: any, pageInfo: unknown) => {
    pagination.value.current = curr.current;
    pagination.value.pageSize = curr.pageSize;
    await getLoginLogListData();
};

// 表格列配置
const columns = ref([
    {
        title: '邮箱',
        colKey: 'email',
        align: 'center',
        width: 150,
    },
    {
        title: '模块',
        colKey: 'module',
        align: 'center',
        width: 70,
    },
    {
        title: '操作',
        colKey: 'operation',
        align: 'center',
        width: 60,
    },
    {
        title: '操作详情',
        colKey: 'detail',
        align: 'center',
        width: 100,
    },
    {
        title: '操作时间',
        colKey: 'create_time',
        align: 'center',
        width: 125,
    },

]);

const getCurrentDate = () => {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    selectedStartDate.value = `${year}-${month}-${day}`;
    selectedEndDate.value = `${year}-${month}-${day}`;
};

const handleSearch = () => {
    pagination.value.current = 1;
    getLoginLogListData();
};

const handleDateChange = () => {
    pagination.value.current = 1;
    getLoginLogListData();
};

const getLoginLogListData = async () => {
    const params = {
        page: pagination.value.current,
        pageSize: pagination.value.pageSize,
        searchKey: searchKey.value,
        start_time: selectedStartDate.value,
        end_time: selectedEndDate.value,
        uid: uid,
    };
    try {
        loading.value = true;
        const res = await operationLogList(params);
        operationLogListDataData.value = res.data.logs;
        pagination.value.total = res.data.total;
        loading.value = false;
    } catch (error) {
        console.error('获取用户列表失败', error);
        // MessagePlugin.error('获取用户列表失败');
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    getCurrentDate();
    getLoginLogListData();
});
</script>

<style scoped>
.wrapper {
    padding: 20px;
}

.table-header {
    margin-top: 20px;
    margin-bottom: 20px;
}

.table-content {
    min-width: 800px;
}

.add-form {
    margin-top: 10px;
}
</style>
